<template>
  <div class="area">
    <div class="top">
      <span>北京</span>
      <span>请在这里输入区域/商圈</span>
      <span>地图找房</span>
    </div>
    <div class="nav">
      <span class="color">区域</span>
      <span @click="navlink('/pages/home/map/price/index')">价格</span>
      <span @click="navlink('/pages/home/map/house/index')">户型</span>
      <span @click="navlink('/pages/home/map/distance/index')">筛选</span>
      <span><img src="../../../../static/filter.png" alt="" /></span>
    </div>
    <div class="list">
      <ul>
        <li
          v-for="(item, index) in city"
          :key="index"
          @click="biao(index)"
          :class="index == xia ? 'active' : ''"
        >
          {{ item.label }}
        </li>
      </ul>
    </div>
    <button @click="navlink('/pages/home/House/House')">确定</button>
  </div>
</template>

<script>
import { getConsult } from "../../../../server/index";
export default {
  data() {
    return {
      city: [],
      xia: 0,
    };
  },
  async onShow() {
    let city = await getConsult("http://157.122.54.189:9060/area?id=AREA%7C88cff55c-aaa4-e2e0");
    if (city.status == 200) {
      console.log(city.body);
      this.city = city.body;
    }
  },
  methods: {
    navlink(path) {
      console.log(path);
      wx.navigateTo({
        url:path,
      });
    },
    biao(index) {
      this.xia = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.active {
  color: red;
}
.area {
  width: 100%;
  height: 100%;
  .color {
    color: #FFC552;
  }
  .top {
    width: 100%;
    margin-top: 20rpx;
    span:nth-child(1) {
      display: inline-block;
      padding: 20rpx 30rpx;
    }
    span:nth-child(2) {
      width: 400rpx;
      color: #999999;
      border: 1rpx solid #cccccc;
      display: inline-block;
      padding: 10rpx 20rpx;
      background: #f4f4f4;
    }
    span:nth-child(3) {
      margin-left: 50rpx;
    }
  }
  .nav {
    width: 100%;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1rpx solid #000;
    span {
      flex: 1;
      text-align: center;
    }
    img {
      width: 35rpx;
      height: 35rpx;
    }
  }
  .list {
    width: 100%;
    ul {
      width: 100%;
      height: 100%;
      li {
        width: 200rpx;
        height: 70rpx;
        line-height: 70rpx;
        text-align: center;
        background: #eee;
      }
    }
  }
  button {
    background: #fd5958;
    color: #fff;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
  }
}
</style>